import React, { Component } from 'react'
import {myGet, myPost} from './fetch'

export default class Http extends Component {
  constructor() {
    super();
    this.state = {
      menuList: []
    }
  }
  // componentDidMount() {
  //   this.http('/api/menulist')
  //     .then(res => {
  //       console.log(res.data);
  //       this.setState({
  //         menuList: res.data.list
  //       })
  //     })
  // }
  fetchGet() {
    fetch('/api/menulist')
      .then(res => res.json())
      .then(res => {
        // console.log(111, res.list);
        this.setState({
          menuList: res.list
        })
      })
  }
  fetchPost() {
    fetch('/api/menuadd', {
      method: 'POST',
      body: {
        ppidd: 1,
        uurls: 'dfghjk'
      }
    })
    .then(res => res.json())
    .then(res => {
      console.log(222, res)
    })
  }
  getHttp() {
    myGet('/api/menulist')
      .then(res => {
        console.log(666, res);
      })
  }
  postHttp() {
    myPost('/api/menuadd', {
      ppidd: 1,
      uurls: 'dfghjk'
    })
      .then(res => {
        console.log(777, res);
      })
  }
  render() {
    return (
      <div>
        <p>发请求</p>
        <hr />
        <button onClick={()=>this.fetchGet()}>fetch-get</button>
        <button onClick={()=>this.fetchPost()}>fetch-post</button>
        <hr />
        <button onClick={()=>this.getHttp()}>get</button>
        <button onClick={()=>this.postHttp()}>post</button>
        {
          this.state.menuList.map((item, index) => {
            return (
              <div key={index}>
                {item.title}
              </div>
            )
          })
        }
      </div>
    )
  }
}
